<template>
    <div
        :class="['w-full text-20 p-24 box-border', { 'min-loading-height': isLoading }]"
        v-loading="isLoading"
        element-loading-text="加载中....."
    >
        <template v-if="!isLoading">
            <PageHeader title="会员属性" :is-data-loading="isLoading" @refresh="resetList"/>
            <!-- 图标数据 -->
            <div class="w-full flex-between-box flex-wrap">
                <div class="w-full flex-between-box">
                    <div class="first-container echarts-box mt-0-important">
                        <EChartsContainer title="近 7 日访问流量" :options="sevenDayFlowOptions" id="sevenDayFlowECharts"/>
                    </div>
                    <div class="first-container echarts-box mt-0-important">
                        <EChartsContainer title="近 7 日不同时段总访问人次" :options="visitNumOptions" id="visitNumECharts"/>
                    </div>
                </div>
                <div class="w-full flex-between-box mt-24">
                    <!-- 消费额排行榜 -->
                    <div class="second-container echarts-box mt-0-important">
                        <EChartsContainer title="消费额排行榜" :custom="true">
                            <template v-slot:title>
                                <el-radio-group v-model="consumptionRadio">
                                    <el-radio-button :label="1" >历史</el-radio-button>
                                    <el-radio-button :label="2">近7日</el-radio-button>
                                    <el-radio-button :label="3">今日</el-radio-button>
                                </el-radio-group>
                            </template>
                            <div class="mt-24">
                                <el-table :data="consumptionData" style="width: 100%">
                                    <!-- 头像 -->
                                    <el-table-column
                                        align="center"
                                        prop="userAvatar"
                                        label="头像"
                                        width="120"
                                    >
                                        <template v-slot="{ row }">
                                            <el-image :src="row.userAvatar" fit="cover" />
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        v-for="item in consumptionColumn"
                                        :label="item.label"
                                        :prop="item.prop"
                                        :key="item.prop"
                                        align="center"
                                    />
                                    <el-table-column align="center">
                                        <template #header>
                                            操作
                                        </template>
                                        <template #default="scope">
                                            <el-button
                                                type="success"
                                                size="small"
                                                plain
                                                @click="handleDetail(scope.$index, scope.row)"
                                            >查看</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </EChartsContainer>
                    </div>
                    <!-- 消费次数排行榜 -->
                    <div class="second-container echarts-box mt-0-important">
                        <EChartsContainer title="消费次数排行榜" :custom="true">
                            <template v-slot:title>
                                <el-radio-group v-model="consumptionTimesRadio">
                                    <el-radio-button :label="1" >历史</el-radio-button>
                                    <el-radio-button :label="2">近7日</el-radio-button>
                                    <el-radio-button :label="3">今日</el-radio-button>
                                </el-radio-group>
                            </template>
                            <div class="mt-24">
                                <el-table :data="consumptionTimesData" style="width: 100%">
                                    <!-- 头像 -->
                                    <el-table-column
                                        align="center"
                                        prop="userAvatar"
                                        label="头像"
                                        width="120"
                                    >
                                        <template v-slot="{ row }">
                                            <el-image :src="row.userAvatar" fit="cover" />
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        v-for="item in consumptionTimesColumn"
                                        :label="item.label"
                                        :prop="item.prop"
                                        :key="item.prop"
                                        align="center"
                                    />
                                    <el-table-column align="center">
                                        <template #header>
                                            操作
                                        </template>
                                        <template #default="scope">
                                            <el-button
                                                size="small"
                                                type="success"
                                                plain
                                                @click="handleDetail(scope.$index, scope.row)"
                                            >查看</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </EChartsContainer>
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { TableColumn } from '@/type/common'
import { timeout } from '@utils/methods'
import EChartsContainer from '@components/EChartsContainer/index.vue'
import PageHeader from '@/components/PageHeader/index.vue'
import dayjs from 'dayjs'

const router = useRouter()

// 是否加载中
const isLoading = ref(true)

// 近 7 日访问流量
const sevenDayFlowOptions = ref({})
// 近 7 日不同时段总访问人次
const visitNumOptions = ref({})

// 临时函数，进行百分比取数
const numFun = (total: number, prop: number) => Number((total * (prop / 100)).toFixed(0))
// 消费额选项
const consumptionRadio = ref<1 | 2 | 3>(1)
// 消费次数选项
const consumptionTimesRadio = ref<1 | 2 | 3>(1)

// 公共 column
const commonColumn: TableColumn[] = [
    { prop: 'username', label: '会员昵称' },
    { prop: 'memberLevel', label: '会员等级' },
    { prop: 'memberCardId', label: '会员卡号' }
]

// 消费额数据 column
const consumptionColumn: TableColumn[] = [
    ...commonColumn,
    { prop: 'consumption', label: '消费额' }
]

// 消费额数据
const consumptionData = [
    {
        userId: 114,
        username: '灼华',
        memberLevel: '桐夏银卡',
        memberCardId: 'X0000114',
        consumption: '￥ 377',
        userAvatar: 'http://www.jsjserve.top/public/images/member-management-system/1682068900883.jpg'
    },
    {
        userId: 1,
        username: '五月',
        memberLevel: '花朝铜卡',
        memberCardId: 'X0000005',
        consumption: '￥ 227',
        userAvatar: 'http://www.jsjserve.top/public/images/member-management-system/1681887349824.jpg'
    },
    {
        username: '阳光玉米棒',
        memberLevel: '花朝铜卡',
        memberCardId: 'X0000068',
        consumption: '￥ 213',
        userAvatar: 'http://www.jsjserve.top/public/images/member-management-system/1681954418099.jpg'
    },
    {
        username: '小余',
        memberLevel: '花朝铜卡',
        memberCardId: 'X0000029',
        consumption: '￥ 196',
        userAvatar: 'http://www.jsjserve.top/public/images/member-management-system/1681887305772.jpg'
    },
    {
        username: '大鸡腿同学',
        memberLevel: '花朝铜卡',
        memberCardId: 'X0000087',
        consumption: '￥ 98',
        userAvatar: 'http://www.jsjserve.top/public/images/member-management-system/1681955192115.jpeg'
    }
]

// 消费次数选项数据 column
const consumptionTimesColumn: TableColumn[] = [
    ...commonColumn,
    { prop: 'consumptionTime', label: '消费次数' }
]

// 消费额数据
const consumptionTimesData = [
    {
        userId: 114,
        username: '灼华',
        memberLevel: '桐夏银卡',
        memberCardId: 'X0000005',
        consumptionTime: 3,
        userAvatar: 'http://www.jsjserve.top/public/images/member-management-system/1682068900883.jpg'
    },
    {
        username: 'MING',
        memberLevel: '花朝铜卡',
        memberCardId: 'X0000112',
        consumptionTime: 2,
        userAvatar: 'http://www.jsjserve.top/public/images/member-management-system/1681887273773.jpg'
    },
    {
        username: '小余',
        memberLevel: '花朝铜卡',
        memberCardId: 'X0000059',
        consumptionTime: 2,
        userAvatar: 'http://www.jsjserve.top/public/images/member-management-system/1681887305772.jpg'
    },
    {
        username: '阳光玉米棒',
        memberLevel: '花朝铜卡',
        memberCardId: 'X0000068',
        consumptionTime: 2,
        userAvatar: 'http://www.jsjserve.top/public/images/member-management-system/1681954418099.jpg'
    },
    {
        username: '大鸡腿同学',
        memberLevel: '花朝铜卡',
        memberCardId: 'X0000087',
        consumptionTime: 2,
        userAvatar: 'http://www.jsjserve.top/public/images/member-management-system/1681955192115.jpeg'
    }
]

setTimeout(async () => {
    await timeout(500)
    isLoading.value = false
    await nextTick()
    /**
     * 近 7 日访问流量
     * */
    // 近 7 日日期
    const sevenDay = []
    for (let day = 0; day <= 6; day++) {
        sevenDay.push(dayjs().subtract(day, 'day').format('MM-DD'))
    }
    const sevenDayFlowData = [45, 81, 69, 74, 32, 38, 92]
    sevenDayFlowOptions.value = {
        // 提示框
        tooltip: {
            trigger: 'item'
        },
        xAxis: {
            type: 'category',
            data: sevenDay.reverse()
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        series: [
            {
                data: sevenDayFlowData.reverse(),
                type: 'line',
                smooth: true
            }
        ]
    }

    /**
     * 近 7 日不同时段总访问人次
     * */
    const totalFlow = sevenDayFlowData.reduce((prev, next) => prev + next, 0)
    const visitNumData: number[] = [
        numFun(totalFlow, 30),
        numFun(totalFlow, 24),
        numFun(totalFlow, 13),
        numFun(totalFlow, 11),
        numFun(totalFlow, 22)
    ].reverse()
    visitNumOptions.value = {
        // 提示框
        tooltip: {
            trigger: 'item'
        },
        // x 轴配置
        xAxis: {
            // 坐标轴类型 - value 数值轴
            type: 'value'
        },
        // y 轴配置
        yAxis: {
            type: 'category',
            data: ['0 - 7点', '7 - 12点', '12 - 18点', '18 - 22点', '22 - 24点']
        },
        // 图标类型配置
        series: [
            {
                // 柱状图
                type: 'bar',
                // 图表数据
                data: visitNumData,
                // 提示文本
                name: '年龄',
                // 显示背景色
                showBackground: true,
                // 背景颜色
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }
        ]
    }
}, 500)

// 刷新数据
const resetList = () => {
    console.log('111')
}

// 查看详情
const handleDetail = (index: number, row: Record<string, any>) => {
    // 查看会员详情
    router.push({
        path: '/MemberManage/MemberDetail',
        query: {
            id: row.userId
        }
    })
}
</script>

<style lang="less" scoped>
:deep(.el-table .cell){
    display: flex;
    justify-content: center;
    align-items: center;
}

:deep(.el-table .cell){
    @apply py-6 px-0;
}

.first-container{
    width: calc((100% - 24px) / 2);
    height: 450px;
}

.second-container{
    width: calc((100% - 24px) / 2);
}

.mt-0-important{
    margin-top: 0 !important;
}

.el-image{
    width: 50px;
    height: 50px;
    @apply rounded-full;
}

:deep(.el-table .el-table__cell){
    border: none !important;
}

:deep(.el-table .cell) {
    font-weight: bold;
}

:deep(.el-table__inner-wrapper::before) {
    height: 0 !important;
    background: transparent;
}

.el-radio-group{
    @apply rounded-20 overflow-hidden;
}

.el-radio-button:first-child :deep(.el-radio-button__inner){
    padding-left: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.el-radio-button:last-child :deep(.el-radio-button__inner){
    padding-right: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

</style>
